<template>
  <Card id="attendanceBusReport">
    <div class="searchBox">
      <Form ref="searchForm" :label-width="90" :model="searchForm" inline>
        <FormItem label="车牌号：" prop="license_plate_num">
          <Input
            v-model="searchForm.license_plate_num"
            clearable
            placeholder="支持模糊搜索"
            style="width: 150px"
            type="text"/>
        </FormItem>
        <FormItem label="车辆线路：" prop="line">
          <Select v-model="searchForm.line" clearable placeholder="选择线路" style="width:150px;">
            <Option value="-1">全部</Option>
            <Option v-for="item in lines" :key="item.value" :value="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="起始日期：" prop="start_date">
          <DatePicker
            v-model="searchForm.start_date"
            placeholder="请选择日期"
            placement="bottom-end"
            style="width: 150px"
            type="date"></DatePicker>
        </FormItem>
        <Form-item label="截至日期：" prop="end_date">
          <DatePicker
            v-model="searchForm.end_date"
            placeholder="请选择日期"
            placement="bottom-end"
            style="width: 150px"
            type="date"></DatePicker>
        </Form-item>
        <FormItem style="margin-left: -90px">
          <Button icon="md-search" type="primary" @click="handleSearch">搜索</Button>
          <Button @click="handleResetSearch">重置</Button>
        </FormItem>
      </Form>
    </div>
    <div class="btns">
      <div style="margin-bottom: 15px;">
        <Button
          :disabled="exportBtnDisable"
          icon="md-cloud-download"
          style="margin-bottom:15px"
          type="primary"
          @click="exportAttendanceBusList">导出
        </Button>
      </div>
    </div>
    <vxe-table
      :data="tableData"
      :loading="loading"
      border
      height="450"
      highlight-hover-row
      show-overflow
      size="mini">
      <vxe-table-column align="center" type="seq" width="100"></vxe-table-column>
      <vxe-table-column align="center" field="busNumber" sortable title="车牌号"></vxe-table-column>
      <vxe-table-column align="center" field="line" title="线路"></vxe-table-column>
      <vxe-table-column align="right" field="normalTime" title="小计"></vxe-table-column>
      <vxe-table-column align="right" field="overTime" title="加班"></vxe-table-column>
      <vxe-table-column align="right" field="nightOverTime" title="晚上加班"></vxe-table-column>
      <vxe-table-column align="right" field="fixTime" title="修车"></vxe-table-column>
      <vxe-table-column align="right" field="leaveTime" title="请假"></vxe-table-column>
      <vxe-table-column align="right" field="stopTime" title="停运"></vxe-table-column>
      <vxe-table-column align="right" field="checkGas" title="检气瓶"></vxe-table-column>
    </vxe-table>
  </Card>
</template>
<script>
import {attendanceBusReportList} from '../../api/attendanceReport'

export default {
  data() {
    return {
      tableData: [],
      exportBtnDisable: true,
      loading: false,
      searchForm: {
        start_date: '',
        end_date: '',
        line: '-1',
        license_plate_num: '',
      },
      lines: [],
    }
  },
  created() {
    this.getLinesArray()
  },
  methods: {
    async getLinesArray() {
      this.lines = await this.getLines()
    },
    getAttendanceBusList() {
      this.loading = true
      this.exportBtnDisable = true
      attendanceBusReportList(this.searchForm).then((res) => {
        if (res.data) {
          this.tableData = res.data.lists
          this.searchForm.start_date = res.data.start_date
          this.searchForm.end_date = res.data.end_date
          this.searchForm.license_plate_num = res.data.license_plate_num
          this.searchForm.line = res.data.line
          this.loading = false
          this.exportBtnDisable = false
        }
      })
    },
    handleSearch() {
      this.getAttendanceBusList()
    },
    handleResetSearch() {
      this.$refs.searchForm.resetFields()
      this.tableData = []
    },
    //导出
    exportAttendanceBusList() {
      const start_date = this.searchForm.start_date
      const end_date = this.searchForm.end_date
      const line = this.searchForm.line
      const license_plate_num = this.searchForm.license_plate_num
      window.location.href =
        '/api/exportAttendanceBusList?start_date=' +
        start_date +
        '&end_date=' +
        end_date +
        '&line=' +
        line +
        '&license_plate_num=' +
        license_plate_num
    },
  },
}
</script>
<style>
#attendanceBusReport .vxe-table,
#attendanceBusReport .vxe-toolbar {
  width: 800px;
  margin-right: auto;
  margin-left: 0;
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vertical-center-modal .ivu-modal {
  top: 0;
}
</style>
